import React from 'react';
import ajax from 'superagent';
import Nav from '../../components/nav/Nav';
import Banner from '../../components/banner/Banner';
import YellowTitle from '../../components/yellowTitle/YellowTitle';
import Echart from '../../components/echart/Echart';
import Statistical from '../../components/statistical/Statistical';
import Comments from '../../components/comments/Comments';
import CommentsInput from '../../components/commentsInput/CommentsInput';

class Schedule extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Schedule';
        this.state = {
            //  我的  信息
            user:  {
                id: "",
                name: "游客1",
                imgSrc: "",
            },

            banner: {
                club1: {
                    logo: "",
                    name: '',
                    score: ''
                },
                club2: {
                    logo: "",
                    name: "",
                    score: ""
                },
                time: {
                    date: "",
                    datetime: "",
                },
                location: ""
            },
            echart : {
              team1: {
                  attack: "",
                  defense: "",
                  defenseAttack: "",
              },
              team2: {
                  attack: "",
                  defense: "",
                  defenseAttack: "",
              }
            },
            history: [],
            skill: [],
            comment: [
               {
                   id: 0,
                   name: "顾晨阳",
                   imgSrc: "",
                   praise: 2,
                   time: "2016年8月1日",
                   comment: " 这场比赛，精彩！！ 期待已久，果然没有让大家失望，加油东北第一",
                   commentsAdd: [
                       {

                           id: 0,
                           name: "齐大胜",
                           comment: " 精彩"
                       },
                       {
                           id: 1,
                           name: "张大春",
                           comment: " 有点遗憾，希望下次能赢！"
                       },
                       {
                           id: 2,
                           name: "齐大胜",
                           comment: " 精彩",
                           parent: 1

                       },
                       {
                           id: 3,
                           name: "齐大胜",
                           comment: " 精彩"
                       },
                       {
                           id: 4,
                           name: "张大春",
                           comment: " 有点遗憾，希望下次能赢！",
                           parent: 3
                       },
                   ]
               },
               {
                   id: 0,
                   name: "顾晨阳",
                   imgSrc: "",
                   praise: 2,
                   time: "2016年8月1日",
                   comment: " 这场比赛，精彩！！ 期待已久，果然没有让大家失望，加油东北第一",
                   commentsAdd: [
                       {

                           id: 0,
                           name: "齐大胜",
                           comment: " 精彩"
                       },
                       {
                           id: 1,
                           name: "张大春",
                           comment: " 有点遗憾，希望下次能赢！"
                       },
                       {
                           id: 2,
                           name: "齐大胜",
                           comment: " 精彩",
                           parent: 1

                       },
                       {
                           id: 3,
                           name: "齐大胜",
                           comment: " 精彩"
                       },
                       {
                           id: 4,
                           name: "张大春",
                           comment: " 有点遗憾，希望下次能赢！",
                           parent: 3
                       },
                   ]
               },
            ]
        }
    }

    fetchingData( id ) {
        console.log( "**********" );
        console.log( "schedule fetchingData" );

        ajax.get(`/api/matches/get/${id}/`)
            .end((error, response) => {
                if( !error && response ) {
                    let data = response.body;
                    console.log(data);

                    // 比赛详情的 历史交锋的数据整理
                    let historyArr = function(){
                        let temp = [];

                        data.math_histories.map(function( history, index ){
                            temp.push({
                                date: history.get_match_time,
                                club1: {
                                    name: history.team_1,
                                    score: history.team_1_score,
                                },
                                club2: {
                                    name: history.team_2,
                                    score: history.team_2_score
                                }
                            });
                        });

                        return temp;
                    };

                    // 技术统计
                    let skillArr = function() {
                        let temp = [];

                        data.lineup.map(function( person, index ){
                            temp.push({
                                name: person.player,
                                club: person.player_team,
                                attack: person.attack_times,
                                defense: person.defense_times,
                                average: person.score
                            });
                        });
                        return temp;
                    };

                    this.setState({
                        id: data.id,
                        banner: {
                            club1: {
                                logo: data.team_1_image,
                                name: data.team_1,
                                score: data.team_1_score
                            },
                            club2: {
                                logo: data.team_2_image,
                                name: data.team_2,
                                score: data.team_2_score
                            },
                            time: {
                                date: data.get_start_date,
                                datetime: data.get_start_time,
                            },
                            location: data.location
                        },
                        echart: {
                            team1: {
                                attack: data.team1_attack_times,
                                defense: data.team1_defense_times,
                                defenseAttack: data.team1_defense_counterattack,
                            },
                            team2: {
                                attack: data.team2_attack_times,
                                defense: data.team2_defense_times,
                                defenseAttack: data.team2_defense_counterattack,
                            }
                        },
                        //  比赛详情的 历史交锋
                        history: historyArr() ,
                        // 技术统计
                        skill: skillArr(),
                        // 评论
                        // comments:
                    });

                 } else {
                     console.error(`Error fetching ${name} `, error);
                  }
        });
    }

    componentWillMount() {
        this.fetchingData('1');
    }

    onCommentSubmit( data ) {
        console.log( data );

        let copyComment = this.state.comment;

        // 如果是回复某人
        if( data.parentid || data.childrenid ) {
          console.log( "not null" );
            copyComment[data.parentid].commentsAdd.push(
            {
                id: copyComment[data.parentid].commentsAdd.length,
                // name 是我的名字
                name: this.state.user.name,
                comment: data.text,
                parent: data.childrenid
            });
        //  不回复某人
        } else {
          console.log( ' main comment' );
            let  date = new Date()
            let time = date.getFullYear() + "年" + date.getMonth() + "月" + date.getDate() + "日";
            console.log( time );
            let commentLength = copyComment.length;
            copyComment[ commentLength ] = {
                id: commentLength,
                name: this.state.user.name,
                imgSrc: this.state.user.imgSrc,
                time: time,
                comment: data.text,
                commentsAdd: []
            }
        }
        console.log( copyComment );
        this.setState({
            comment: copyComment
        })
    }

    render() {
        console.log('Schedule render ~~~~' );
        console.log( this.state.comment );

        return (
            <div>
                <Nav mode="snav" name="比赛详情" />
                <Banner mode="schedule" button= "true" data={this.state.banner} />
                <section className="matchEchart"mode="match">
                    <YellowTitle title="比赛详情" />
                    <Echart mode="match" matchDatas= {this.state.echart}/>
                </section>

                <Statistical mode = "history" yellowTitle="历史交锋" data={this.state.history}/>
                <Statistical mode = "skill" yellowTitle="技术统计" data={this.state.skill} />
                <Comments data = {this.state.comment} />
                <CommentsInput commentSubmit = {this.onCommentSubmit.bind(this)} />
            </div>

        );
    }
}

export default Schedule;
